<template>
	<view class="store-card-container">
		<view class="store-img">
			<image :src="$u.file.getMedieUrl(storeDetails.shopCoverUrl)" mode=""></image>
		</view>
		<view class="store-info">
			<view class="name">
				<view>
					<image style="width:60rpx;height: 60rpx;" :src="$u.file.getMedieUrl(storeDetails.shopAvatarUrl)" mode=""></image>
					<text>{{storeDetails.shopName}}</text>
				</view>
				<button type="default">Entering</button>
			</view>
			<view class="introduce">
				<text>{{storeDetails.intro}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "storeCard",
		props: {
			storeDetails: {
				default: () => ({}),
				type: Object
			}
		},
		data() {
			return {
				appBaseUrl: process.uniEnv.COSHost,
			};
		}
	}
</script>

<style lang="scss" scoped>
	.store-card-container {
		padding: 16rpx 17rpx;
		background-color: #fff;
		border-radius: 32rpx;
		box-shadow: 0px 10px 40px 24px rgba(237, 237, 237, 0.5);

		.store-img {
			>image {
				border-radius: 32rpx;
				height: 338rpx;
				width: 100%;
			}
		}

		.store-info {
			.name {
				margin-top: 38rpx;
				display: flex;
				justify-content: space-between;
				position: relative;
				>view {
					display: flex;
					padding-left: 9rpx;
				}

				&::after {
					position: absolute;
					content: '';
					width: 100%;
					border-top: 1px solid #f5f6f8;
					bottom: -26.6rpx;
				}

				text {
					line-height: 60rpx;
					margin-left: 19rpx;
				}

				>button {
					margin: 0;
					border: 1px solid #2934d0;
					background-color: #fff;
					color: #2934d0;
					border-radius: 6px;
					height: 60rpx;
					line-height: 60rpx;
					font-size: 20rpx;
					padding: 0 30rpx;
				}
			}

			.introduce {
				margin-top: 57rpx;
				padding-left: 9rpx;
				padding-bottom: 18rpx;
				>text {
					line-height: 44rpx;
					font-size: 30rpx;
				}
			}
		}
	}
</style>
